<template>
  <div class="ele-body">
    <el-card shadow="never">
      <table-list
          ref="table"
          row-key="RoleID"
          url="/role"
          :columns="columns">
        <template slot="toolbar">
          <el-button
              v-if="power.create" type="primary" icon="el-icon-plus"
              class="ele-btn-icon" @click="addOrEdit(false)">
            添加
          </el-button>
        </template>
        <template slot="action" slot-scope="{row, $index}">
          <template v-if="power.groupAuth.action">
            <el-link v-if="power.update" @click="addOrEdit(row)" icon="el-icon-edit" type="primary" :underline="false">
              编辑
            </el-link>
            <el-link
                v-if="power.node" @click="addOrEdit(row, 2)"
                icon="el-icon-set-up" type="primary" :underline="false">
              权限分配
            </el-link>
            <confirm-button
                v-if="power.delete"
                :status="Number(row.RoleStatus)"
                @confirm="(status) => updateStatus(status, row)"/>
          </template>
          <template v-else> ---</template>
        </template>
      </table-list>
    </el-card>

    <!-- 编辑弹窗 -->
    <save-role :data="current" :visible.sync="showEdit" @done="reload"/>
    <role-power
        :menu="menuList"
        :roleId="current.RoleID ? Number(current.RoleID) : 0"
        :checked="current.NodeID ? current.NodeID : false"
        :visible.sync="showPower"
        @done="reload"/>
  </div>
</template>

<script>
import SaveRole from './dialog/save'
import columns from '@/config/columns/role'
import RolePower from './dialog/configure-permissions'
import ConfirmButton from '@/components/plugIn/confirm-button'

export default {
  name: 'role-index',
  components: {
    SaveRole,
    RolePower,
    ConfirmButton
  },
  data () {
    return {
      // 列表定义
      columns,
      // 当前编辑数据
      current: {},
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示编辑弹窗-权限
      showPower: false,
      // 菜单节点数据
      menuList: [],
      // 权限
      power: {}
    }
  },
  created () {
    let auth = {
      create: 'role:create',
      update: 'role:update',
      node: 'role:node',
      delete: 'role:delete',
    }
    this.power = this.$roleListPermission(auth, {
      action: ['update', 'node', 'delete']
    })
  },
  methods: {
    /* 加载菜单列表 */
    loadMenuList () {
      this.$http.get('/node', { params: { ShowStatus: 1 } }).then(res => {
        if (res.data.code === 200) {
          let menu = res.data.result.list.map(res => {
            res.id = Number(res.NodeID)
            return res
          })
          this.menuList = this.$util.toTreeData(menu, 'NodeID', 'ParentID')
        }
      })
    },
    /* 刷新表格 */
    reload () {
      this.$refs.table.reload()
    },
    /* 编辑行 */
    addOrEdit (row, type = 1) {
      let current = row ? Object.assign(row, {}) : {}
      if (type === 1) {
        this.showEdit = true
        this.current = {
          RoleName: current.RoleName || '',
          RoleDesc: current.RoleDesc || '',
          RoleID: current.RoleID || 0,
          IsStaffShow: current.IsStaffShow || 0
        }
      } else {
        if (!this.menuList.length) {
          this.loadMenuList()
        }
        this.current = {
          RoleID: current.RoleID,
          NodeID: current.NodeID
        }
        this.showPower = true
      }
    },
    /* 删除行 */
    updateStatus (status, row) {
      const loading = this.$loading({ lock: true })
      this.$http.post('/role/status', { ID: row.RoleID, Status: status }).then(res => {
        loading.close()
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.reload()
        }
      }).catch(() => {
        loading.close()
      })
    },
  }
}
</script>

